 <%=render partial: "head",  as: "item"%> <!--引入头部的局部视图文件-->

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2 col-sm-3">
      <div class="list-group" id="left-list-group-id">
        <a class="list-group-item active" href="#">JAVA</a>
        <a class="list-group-item disabled" href="#">Ruby</a>
        <a class="list-group-item " href="#">Python3</a>
        <a class="list-group-item " href="#">JAVAScript</a>
        <a class="list-group-item disabled" href="#">IDEA</a>

      </div>
    </div>
    <div class="col-lg-10 col-sm-9">

      <div class="col-lg-9">
        <% @posts.each do |post| %>
        <h3>
          <a href="" class="active">
              <%=post.title%>
          </a>
        </h3>
        <h6>作者：<a href="#" class=""><%=post.author%></a>&nbsp;&nbsp;&nbsp;&nbsp;
          <tr>
            <td><%= link_to '查看', post %></td>
            <td><%= link_to '编辑', edit_post_path(post) %></td>
            <td><%= link_to '删除', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
          </tr>
        </h6>
        <p style="height: 50px;overflow: hidden">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <%=post.context[0,150]%>
          <%if post.context.length>150 then%>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;......更多
          <%end%>
        </p>
      <%end%>
      </div>

      <div class="col-lg-3">
        Hello Wrold!
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  var $tmp =  $("ul#nav-ui-id > li");
  var className = "active";
  $tmp.click(function() {
    $(this).addClass(className).siblings().removeClass(className);
  });

  /* 如果有disabled类，这禁用链接，否则为其修改样式并将其他的同类样式删除*/
  $("div#left-list-group-id > a").click(function() {
    if(false == $(this).hasClass("disabled")){
      $(this).addClass(className).siblings().removeClass(className);
    }else{
      $(this).removeAttr("href").removeAttr("onclick");
    }

  });
</script>



















